<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登陆</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="shortcut icon" href="#" />
		<link rel="stylesheet" href="css/layui.css" media="all">
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script src="layui/layui.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/jquery.particleground.min.js"></script>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
				background-image: url(img/2.png);
			}
			
			body:after {
				content: '';
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-filter: blur(3px);
				-moz-filter: blur(3px);
				-o-filter: blur(3px);
				-ms-filter: blur(3px);
				filter: blur(3px);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}
			
			.layui-container {
				width: 100%;
				height: 100%;
				overflow: hidden
			}
			
			.admin-login-background {
				width: 360px;
				height: 300px;
				position: absolute;
				left: 50%;
				top: 40%;
				margin-left: -180px;
				margin-top: -100px;
			}
			
			.logo-title {
				text-align: center;
				letter-spacing: 2px;
				padding: 14px 0;
			}
			
			.logo-title h1 {
				color: #02A7DE;
				font-size: 25px;
				font-weight: bold;
			}
			
			.login-form {
				background-color: #ffffff;
				border: 1px solid #ffffff;
				border-radius: 3px;
				padding: 14px 20px;
				box-shadow: 0 0 8px #eeeeee;
			}
			
			.login-form .layui-form-item {
				position: relative;
			}
			
			.login-form .layui-form-item label {
				position: absolute;
				left: 1px;
				top: 1px;
				width: 38px;
				line-height: 36px;
				text-align: center;
				color: #d2d2d2;
			}
			
			.login-form .layui-form-item input {
				padding-left: 36px;
			}
			
			.left {
				margin-left: 70px;
				margin-right: 50px;
			}
			
			.loginStyle {
				cursor: pointer;
			}
			
			.registColor {
				color: #02A7DE;
			}
		</style>
	</head>

	<body>
		<div class="layui-container">
			<div class="admin-login-background">
				<div class="layui-form login-form">
					<div>
						<span class="loginStyle" id="aLogin">密码登录</span>
						<span class="loginStyle" id="bLogin">手机登录</span>
					</div>
					<form class="layui-form" lay-filter="pwdLogin">
						<div class="layui-form-item logo-title">
							<h1>登录</h1>
						</div>

						<div id="content">
							<div class="layui-form-item">
								<label class="layui-icon layui-icon-username" for="username"></label>
								<input id="userName" name="userName" type="text" lay-verify="user" placeholder="用户名" class="layui-input">
							</div>
							<div class="layui-form-item">
								<label class="layui-icon layui-icon-password" for="password"></label>
								<input id="passWord" name="passWord" type="password" lay-verify="pwd" placeholder="密码" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<input id="remember" type="checkbox" lay-skin="primary" lay-filter="remember" title="记住密码">
						</div>

						<div class="layui-form-item">
							<button class="layui-btn layui-btn-normal left" lay-submit lay-filter="login" type="button">登录</button>
							<a href="register.html" class="registColor">注册</a>
						</div>

					</form>
				</div>
			</div>
		</div>

		<script>
			//  判断是否存在cookie免密登录
			$.ajax({
				type:"get",
				url:apiPath + "/users/withoutCode",
				success:function(data){
					var sessionId = data.data
					if(sessionId != null){
						location.href = "index.html?root=" + sessionId
					}
				}
			});
			//  自定义验证规则  
			layui.use(['form', 'layer'], function(form, layer) {

				//   切换验证方式为密码登录
				$("#aLogin").on("click", function() {
					$("#content").html("");
					$("#content").append(
						`<div class="layui-form-item">
								<label class="layui-icon layui-icon-username" for="username"></label>
								<input id="userName" name="userName" type="text" lay-verify="user" placeholder="用户名" class="layui-input">
							</div>
							<div class="layui-form-item">
								<label class="layui-icon layui-icon-password" for="password"></label>
								<input id="passWord" name="passWord" type="password" lay-verify="pwd" placeholder="密码" autocomplete="off" class="layui-input">
							</div>`
					);
					$("#aLogin").css("color", "#02A7DE")
					$("#bLogin").css("color", "black")
				})

				//   切换验证方式为手机登录
				$("#bLogin").on("click", function() {
					$("#content").html("");
					$("#content").append(
						`<div class="layui-form-item">
				    <label class="layui-icon layui-icon-username" for="username"></label>
				    <input id="userPhone" name="userPhone" type="text" lay-verify="phoneStyle" placeholder="手机号" class="layui-input">
			        </div>
			        <div class="layui-form-item">
				    <label class="layui-icon layui-icon-vercode" for="code"></label>
				    <div class="layui-input-inline">
					<input id="code" name="code" type="text" lay-verify="codeStyle" placeholder="请输入验证码" class="layui-input">
				    </div>
				    <button class="layui-btn layui-btn-normal">获取验证码</button>
			        </div>`);
					$("#aLogin").css("color", "black")
					$("#bLogin").css("color", "#02A7DE")
				})

				//  异步判断用户是否存在
				$(document).on("blur", "#userName", function() {
					var userName = $("#userName").val();
					$.ajax({
						type: "get",
						url: apiPath + "/users?userName=" + userName,
						success: function(data) {},
						error: function(data) {
							var result = jQuery.parseJSON(data.responseText);
							var errMsg = result.errMsg;
							layer.alert(errMsg)
						}
					});
				})

				//  异步判断手机号是否存在
				$(document).on("blur", "#userPhone", function() {
					var userPhone = $("#userPhone").val();
					$.ajax({
						type: "get",
						url: apiPath + "/users/" + userPhone + "/c",
						success: function(data) {

						},
						error: function(data) {
							var result = jQuery.parseJSON(data.responseText);
							var errMsg = result.errMsg;
							layer.alert(errMsg)
						}
					});
				})
				//  默认密码登录
				form.verify({
					user: function(value) {
						if(value < 1) {
							return "用户名不能为空";
						}
					},
					pwd: function(value) {
						if(value < 1) {
							return "密码不能为空";
						}
					},
					phoneStyle: function(value) {
						if(value < 1) {
							return "手机号不能为空";
						}
						if(!/^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,3,7,8]|8[0-9]|9[1,8,9])\d{8}$/.test(value)) {
							return "手机号格式不正确";
						}
					},
					codeStyle: function(value) {
						if(value < 1) {
							return "验证码不能为空";
						}
					}
				});

				//  监听复选框,kooie免密登录
				var flag;
				
				form.on('checkbox(remember)', function(data) {
					//是否被选中，true或者false
					flag = data.elem.checked;

				});
				
				//  登录提交操作
				form.on('submit(login)', function(data) {
					var code = $("#code").val();
					var userPhone = $("#userPhone").val();
					var userName = $("#userName").val();
					var passWord = $("#passWord").val();
					alert(flag)
					//   密码登录
					if(undefined != userName && undefined != passWord) {
						$.ajax({
							type: "get",
							url: apiPath + "/users/pwd?userName=" + userName + "&passWord=" + passWord+"&flag="+flag,
							data: {

							},
							success: function(data) {
								if(data.code == 200) {
									location.href = "index.html?pwd=" + userName
								}
							},
							error: function(data) {
								var result = jQuery.parseJSON(data.responseText);
								var errMsg = result.errMsg;
								layer.alert(errMsg)
							}
						});
					}

					//  手机号登录
					if(undefined != userPhone && undefined != code) {
						$.ajax({
							type: "get",
							url: apiPath + "/users/pwd?userPhone=" + userPhone + "&code=" + code+"&flag="+flag,
							data: {},
							success: function(data) {
								if(data.code == 200) {
									location.href = "index.html?phone=" + userPhone
								}
							},
							error: function(data) {
								var result = jQuery.parseJSON(data.responseText);
								var errMsg = result.errMsg;
								layer.alert(errMsg)
							}
						});
					}

					return false;
				});

			});

			// 粒子线条背景
			$(document).ready(function() {
				$('.layui-container').particleground({
					dotColor: '#87DCBE',
					lineColor: '#A9CBEE'
				});
			});
		</script>
	</body>

</html>